<template>
    <div class="main-border">
        <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">上线的二手物品</el-menu-item>
            <el-menu-item index="2">下架的二手物品</el-menu-item>
        </el-menu>
        <el-table v-if="this.mode == 1"
                :data="onlineGoods"
                stripe
                style="width: 100%;color: #5a5c61;">
            <el-table-column
                    prop="releaseTime"
                    label="发布日期"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="idleCondition"
                    label="物品成色"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="idleName"
                    label="二手物品名称"
                    show-overflow-tooltip
                    >
            </el-table-column>
            <el-table-column
                    prop="user.nickname"
                    label="发布用户"
                    show-overflow-tooltip
                    min-width="100"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="idlePrice"
                    label="价格"
                    show-overflow-tooltip
                    min-width="100"
                    width="100">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="makeOfflineGoods(scope.$index)">违规下架</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-table v-show="this.mode == 2"
                  :data="OfflineGoods"
                  stripe
                  style="width: 100%;color: #5a5c61;">
            <el-table-column
                    prop="releaseTime"
                    label="发布日期"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="idleCondition"
                    label="物品成色"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="idleName"
                    label="二手物品名称"
                    show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                    prop="user.nickname"
                    label="发布用户"
                    show-overflow-tooltip
                    min-width="100"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="idlePrice"
                    label="价格"
                    show-overflow-tooltip
                    min-width="100"
                    width="100">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteGoods(scope.$index)">永久删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="nowPage"
                    :page-size="8"
                    background
                    layout="prev, pager, next,jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
    export default {
        name: "IdleGoods",
        data(){
            return {
                mode:1,
                nowPage: 1,
                total: 0,
                onlineGoods: [],
                OfflineGoods:[],
            }
        },
        created() {
            this.getOnlineGoods();
        },
        methods: {
            handleCurrentChange(val) {
                this.nowPage = val;
                if(this.mode == 1){
                    this.getOnlineGoods();
                }
                if(this.mode == 2){
                    this.getOfflineGoods();
                }
            },
            handleSelect(val){
                if(this.mode !== val){
                    this.mode = val;
                    if(val == 1){
                        this.nowPage = 1;
                        this.getOnlineGoods();
                    }
                    if(val == 2){
                        this.nowPage = 1;
                        this.getOfflineGoods();
                    }
                }
            },
            makeOfflineGoods(i){
                this.$api.updateGoods({
                    id: this.onlineGoods[i].id,
                    status:2
                }).then(res => {
                    if(res.status_code==1){
                        this.getOnlineGoods();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(e => {
                    console.log(e)
                })
            },
            deleteGoods(i){
                this.$api.updateGoods({
                    id: this.OfflineGoods[i].id,
                    status:0
                }).then(res => {
                    if(res.status_code==1){
                        this.getOfflineGoods();
                    }else {
                        this.$message.error(res.msg)
                    }

                }).catch(e => {
                    console.log(e)
                })
            },
        getOnlineGoods() {
            this.$api.getGoods({
                status: 1,
                page: this.nowPage,
                nums: 8
            }).then(res => {
                if (res.status_code == 1) {
                    this.onlineGoods = res.data.list.map(item => {
                        item.releaseTime = dayjs(item.releaseTime).format('YYYY-MM-DD HH:mm:ss');
                        return item;
                    });
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        },
        getOfflineGoods() {
            this.$api.getGoods({
                status: 2,
                page: this.nowPage,
                nums: 8
            }).then(res => {
                if (res.status_code == 1) {
                    this.OfflineGoods = res.data.list.map(item => {
                        item.releaseTime = dayjs(item.releaseTime).format('YYYY-MM-DD HH:mm:ss');
                        return item;
                    });
                    this.total = res.data.count;
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(e => {
                console.log(e)
            })
        }
        }

    }
</script>

<style scoped>
    .main-border{
        background-color: #FFF;
        padding: 10px 30px;
        box-shadow: 0 1px 15px -6px rgba(0,0,0,.5);
        border-radius: 5px;
    }
    .block {
        display: flex;
        justify-content:center;
        padding-top: 15px;
        padding-bottom: 10px;
        width: 100%;
    }
</style>